<script setup>
const props = defineProps({
    text: {
        type: String,
        default: '按钮'
    },
    borderRadius: {
        type: String,
        default: 'lg'
    },
    fontColor: {
        type: String,
        default: 'white' // Tailwind text color (e.g., text-white)
    },
    fontSize: {
        type: String,
        default: 'base' // Tailwind font size (e.g., text-base)
    },
    paddingX: {
        type: String,
        default: '5' // Tailwind padding-x (e.g., px-5)
    },
    paddingY: {
        type: String,
        default: '3' // Tailwind padding-y (e.g., py-3)
    },
    backgroundColor: {
        type: String,
        default: 'gray-800' // Tailwind background color (e.g., bg-gray-800)
    },
    backgroundHoverColor: {
        type: String,
        default: 'gray-400'
    }
})
</script>

<template>
    <button
        :class="[
      'inline-flex justify-center items-center',
      `rounded-${props.borderRadius}`,
      `text-${props.fontColor}`,
      `text-${props.fontSize}`,
      `px-${props.paddingX}`,
      `py-${props.paddingY}`,
      `bg-${props.backgroundColor}`,
      `hover:bg-${props.backgroundHoverColor}`,
      'font-medium text-center focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 cursor-pointer'
    ]"
        v-bind="$attrs"
    >
        <slot>{{ props.text }}</slot>
    </button>
</template>


